<template>
    <view class="pagesBottom" v-if="$utils.isHad(orderModel.order.orderStatus, [0]) && $utils.isHad(orderModel.order.payStatus, [0])">
        <view class="cont">
            <view class="left-box">
                <view class="left-txt">支付金额：</view>
                <view class="left-price">{{ orderModel.order.orderAmount }}</view>
            </view>
            <view class="right-box">
                <x-btn text="立即支付" @click="navsTo(`/sub_pages/movie/pay/pay?orderId=${orderModel.order.id}`)"></x-btn>
            </view>
        </view>
    </view>
</template>

<script>
import xBtn from '@/sub_pages/movie/components/x-btn/x-btn.vue';
export default {
    components: { xBtn },
    props: {
        orderModel: {
            type: Object,
            default: () => {},
        },
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.pagesBottom {
    height: 120rpx;
    .cont {
        height: 120rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        @include flexCenterBetween;
        background-color: #fff;
        box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
    }
    .left-box {
        @include flexCenter;
        &-txt {
            @include font(28rpx, #030303);
        }
        &-price {
            @include font(44rpx, #ff8600);
        }
    }
    .right-box {
        width: 248rpx;
        height: 78rpx;
        background: linear-gradient(90deg, #5aa747 0%, #59cd3c 100%);
        border-radius: 50px;
        font-size: 30rpx;
        font-weight: bold;
        color: #ffffff;
    }
}
</style>
